<template>
  <div class="app-main" id="macro">
    <div class="left" :style="styles" @click.stop.prevent="hideMapTool">
      <query @querystyle="styleChange" @openCollect="openCollect"></query>
    </div>
    <div class="right">
      <div class="map-tool">
        <map-tool :image="toolImageParams" :mapdata="mapdata" :hideMapToolItem="hideMapToolItem"></map-tool>
      </div>
      <!-- 盛放地图的容器 -->
      <div class="content" @click.stop.prevent="hideMapTool">
        <layer></layer>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Query from "./query/index"; //左边查询面板
import MapTool from "@/components/MapTool/mapTool"; // 地图工具栏组件
// import MapTool from "../../../../components/MapTool/tool"; // 地图工具栏组件
import Layer from "./map/index"; // 地图组件
import mapdata from "./map/data/data.js";
import authority from "static/js/authority.js";
import axios from "axios";
import regionUrl from "static/config/region.js";
export default {
  name: "micro",
  components: {
    Query,
    MapTool,
    Layer // 地图组件
  },
  data() {
    return {
      toolImageParams: {
        el: "map", // 所需要截图的元素id
        insertEl: "macro" // 插入截图的元素id
      }, // 截图传递的参数
      styles: {}, // query组件样式
      mapdata: [],
      showCollect: false, //汇总分析展示
      hideMapToolItem: false
    };
  },
  created() {},
  mounted() {
    let that = this;
    that.mapdata = mapdata;

    //获取权限方法
    var userInfo = localStorage.getExpire("userInfo");
    var token_type = localStorage.getExpire("token_type");
    var access_token = localStorage.getExpire("access_token");
    if (userInfo == null || token_type == null || access_token == null) {
      that.$message({
        message: "你还没有登录",
        type: "error"
      });
      setTimeout(function() {
        top.location.href = loginPageUrl;
      }, 2500);
    } else {
      // 获取用户id
      const userid = JSON.parse(userInfo).sysUser.userId;
      // 根据用户id获取用户区划信息
      axios
        .get(config.loginUrl.userRegion + "?user_id=" + userid, {
          headers: {
            Authorization: token_type + " " + access_token
          }
        })
        .then(response => {
          if (response.status === 200) {
            const data = response.data.data;
            const regionData = data[0];
            // 查询区划对应详细信息
            let param = {
              regionCode: regionData.regionCode,
              rcid: regionData.rcid
            };
            axios
              .get(regionUrl.class.getRegionSelf, {
                params: param,
                headers: {
                  Authorization: token_type + " " + access_token
                }
              })
              .then(response => {
                if (response.status === 200) {
                  let regionSelf = response.data.data;
                  if (regionSelf === null) {
                    console.log("未设置用户区划");
                    return;
                  } else {
                    let rgData = {
                      code: regionSelf.code,
                      id: regionSelf.id,
                      memo: regionSelf.memo,
                      name: regionSelf.name,
                      originCode: regionSelf.originCode,
                      originName: regionSelf.originCode,
                      parCode: regionSelf.parCode,
                      parCodeName: "",
                      rcid: regionSelf.rcid,
                      regionCodeType: regionSelf.regionCodeType,
                      ruralProperty: regionSelf.ruralProperty,
                      shortName: regionSelf.shortName,
                      urcCode: regionSelf.urcCode,
                      version: regionSelf.version,
                      villageProperty: regionSelf.villageProperty,
                      x: regionSelf.x,
                      y: regionSelf.y
                    };
                    EventBus.$emit("initRegion", [rgData]);
                  }
                }
              })
              .catch(error => {
                console.log(error);
              });
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  computed: {
    ...mapState({
      showMapControl: state => state.macro.showMapControl
    })
  },
  methods: {
    ...mapMutations(["changeShowMapControl"]),
    //点击地图隐藏面板
    hideMapTool() {
      this.hideMapToolItem = !this.hideMapToolItem;
      this.$store.commit("changeShowMapControl", false);
      this.$store.commit("changeShowGroup", false);
    },
    styleChange(style) {
      this.styles = style;
    },
    //打开汇总界面
    openCollect() {
      this.showCollect = true;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.spatialquery {
  overflow: hidden;
}
.app-main {
  width: 100%;
  height: 100%;
  position: relative;
  .left {
    position: absolute;
    min-height: 50px;
    height: 100%;
    z-index: 1200;
  }
  .right {
    height: 100%;
    width: 100%;
    background: #ccc;
    .map-tool {
      position: absolute;
      top: 17px;
      right: 23px;
      z-index: 999;
      cursor: pointer;
    }
    .content {
      width: 100%;
      height: 100%;
    }
    .enlarge-icon {
      position: absolute;
      top: 20px;
      right: 40px;
      cursor: pointer;
    }
  }
}
</style>
<style>
#dialog-scene .el-dialog__body {
  padding: 0px 5px 5px 5px !important;
}

.el-select__tags {
  white-space: nowrap;
  overflow: hidden;
}
.el-select .el-select__tags>span{
  display: flex;
  align-items: center;
}
</style>
